import React,{Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router';
import { Layout } from 'element-react';
import { Card } from 'element-react';

class Detail extends Component{
    render(){
        const {detail} = this.props;
        return (
            <div>
                <Link to="/product"><button type="button" className="btn btn-default" >返&nbsp;&nbsp;回</button></Link>
                <div className="jumbotron" style={{margin:'0 auto'}}>
                    <Layout.Row >
                        <Layout.Col span={ 10 } offset={ 7 }>
                            <Card bodyStyle={{ padding: 4 }}>
                                <img src={detail.picurl} className="image" style={{width:'400px',height:'350px'}}/>
                                <div style={{ padding: 14 }}>
                                    <h4 style={{textAlign:'center'}}>{detail.productname}</h4>
                                    <p>单价: {detail.unitprice}</p>
                                    <p>产地：{detail.origin}</p>
                                </div>
                            </Card>
                        </Layout.Col>
                    </Layout.Row>
                </div>
            </div>
        )
    }

}

const getValue = (state)=>{
    console.log(state)
    return{
        detail:state.detail.detail
    }
}

const Pdtdetail = connect(getValue,{})(Detail);

module.exports=Pdtdetail;